<template>
    <div class="content">
    <levelbar></levelbar>
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="90px" slot="form" >          
                <el-row :gutter="21">                   
                    <el-col :span="8">
                        <el-form-item label="类目">
                           <el-select v-model="formInline.typeReport" style="width:100%" >
                                <el-option v-for="item in formInline.typeReportList" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="支付方式">
                           <el-select v-model="formInline.payment" style="width:100%" >
                                <el-option v-for="item in formInline.paymentList" :key="item.paymentId" :label="item.paymentName" :value="item.paymentId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="状态">
                             <el-select v-model="formInline.typeStatus" style="width:100%" >
                                <el-option v-for="item in formInline.statusType" :key="item.typeStatustId" :label="item.statusName" :value="item.typeStatustId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="订单号">
                            <el-input v-model="formInline.flowNum" placeholder="请输入订单号" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row :gutter="21">    
                    <el-col :span="8">
                        <el-form-item label="日期范围">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.startDate" :editable="false" type="date" placeholder="选择时间日期" @change="dateChange1" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="formInline.endDate" :editable="false" type="date" placeholder="选择时间日期" @change="dateChange2" :picker-options="formInline.pickerOptions2" style="width:100%"></el-date-picker>
                                </el-col>  
                            </el-row>             
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div>
                    <el-button @click="goIntegral">查看积分账户</el-button>
                    <el-button @click="exportBtn">导出</el-button>
                </div>
                <div class="btnPosition1">当前余额：{{balanceMoney}}元</div>
                <!-- <span class="title-tix">*本页面不包含用户的提现记录</span> -->
            </div>
            <el-table :data="dataApply" style="width: 100%" border v-loading="loading">

               <el-table-column label="时间" align="center" min-width="150">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime}}</span>
                    </template>
               </el-table-column>
                
                <el-table-column label="类目" align="center" prop="sType" min-width="150"></el-table-column>

                <el-table-column label="状态" align="center">
                     <template scope="scope">
                        <span>{{scope.row.sStatus | isNull}}</span>
                    </template>       
                </el-table-column>

                <el-table-column label="交易金额" align="center" prop="sMoney"></el-table-column>
                
                <el-table-column label="支付方式" align="center" prop="resloveTime">
                    <template scope="scope">
                        <span>{{scope.row.sType=='提现'?'--':scope.row.fPayType | isNull}}</span>
                        <!-- <span v-if="scope.row.fPayType=='0'">微信</span>
                        <span v-if="scope.row.fPayType=='1'">支付宝</span>
                        <span v-if="scope.row.fPayType=='2'">e学云余额</span>
                        <span v-if="!scope.row.fPayType"></span> -->
                    </template>   
                </el-table-column>

                <el-table-column label="订单号" align="center" prop="sFlowNum" min-width="150">
                    <template scope="scope">
                        <span>{{scope.row.sType=='提现'?'--':scope.row.sFlowNum | isNull}}</span>
                    </template>   
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {listCashType, pagePayCashDetail, getUserCash} from 'api/accountMagement';
import TableLayout from 'components/TableLayout';
import moment from 'moment';
import Levelbar from '../layout/Levelbar';
import { mapState, mapActions } from 'vuex';
// import Cookies from 'js-cookie';
export default{
    name: 'checkFigure',
    components: {TableLayout, Levelbar},
    data() {
        return {
            formInline: {// form表单数据
                reportName: '', // 名字
                flowNum: '', // 订单号
                typeReport: '', // 类型
                typeReportList: [],
                payment: '', // 支付方式
                paymentList: [
                    {
                        paymentId: '',
                        paymentName: '全部'
                    },
                    {
                        paymentId: '0',
                        paymentName: '微信'
                    },
                    {
                        paymentId: '1',
                        paymentName: '支付宝'
                    },
                    {
                        paymentId: '2',
                        paymentName: 'e学云余额'
                    }
                ],
                typeStatus: '', // 状态
                statusType: [
                    {
                        typeStatustId: '',
                        statusName: '全部'
                    },
                    {
                        typeStatustId: '1',
                        statusName: '处理成功'
                    }, 
                    {
                        typeStatustId: '2',
                        statusName: '失败'
                    },
                    {
                        typeStatustId: '3',
                        statusName: '未支付'
                    },
                    {
                        typeStatustId: '4',
                        statusName: '审核中'
                    }
                ],
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间                                          
                pickerOptions1: {},
                pickerOptions2: {}
            },
            balanceMoney: '',
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    // filters: {
    //     filterState(val) {
    //         if (val.sType == '提现') {
    //             let stateArr = ['暂未处理转账', '向银行发出转账申请', '银行正在处理，请稍后查询', '查询失败，请手动刷新查询', '转账失败，请处理', '本笔交易需由【人工】转账'];
    //             let isTrue = stateArr.some(item => {               
    //                 if (item == val.sStatus) return true;
    //             });          
    //             if (isTrue) return '审核中';
    //             if (val.sStatus == '线下转账失败' || val.sStatus == '驳回') return '失败';
    //             if (val.sStatus == '银行转账成功' || val.sStatus == '线下转账成功') return '处理成功';
    //         } else {
    //             return val.sStatus
    //         }           
    //     }
    // },
    // 初始化
    created() {
        this.getListCashType();
        this.searchFetchData();
        this.getUserMoney();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
      
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },

        // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');// 开始时间格式处理
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');// 结束时间格式处理
            pagePayCashDetail(
            this.listQuery.page, 
            this.config.pageSize, 
            this.$route.params.id,  
            startDate, 
            endDate,
            this.formInline.typeStatus,
            this.formInline.flowNum,
            this.formInline.typeReport,
            this.formInline.payment,
            ).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;   
            });
        },
        // 导出
        exportBtn() {
            // let Token = Cookies.get('accessToken');
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');// 开始时间格式处理
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');// 结束时间格式处理
            window.location.href = `${LOCAL_API.bsp}/balanceScore/exportPayCashDetail?userId=${this.$route.params.id}&startTime=${startDate}&endTime=${endDate}&kind=${this.formInline.typeReport}&payType=${this.formInline.payment}&status=${this.formInline.typeStatus}&flowNum=${this.formInline.flowNum}`;     
        },
        // 处理
        getListCashType() {
            listCashType().then(res => {
                // let arrIndex;
                this.formInline.typeReportList = res.data.content;            
                // this.formInline.typeReportList.forEach((item, index) => {
                //     if (item.typeId == '40002') {
                //         return arrIndex = index
                //     } 
                // });                
                // this.formInline.typeReportList.splice(arrIndex, 1);
                this.formInline.typeReportList.unshift({
                    typeId: '',
                    typeName: '请选择'
                });
            })
        },
        // 当前余额
        getUserMoney() {
            getUserCash(this.$route.params.id).then(res => {
                this.balanceMoney = res.data.content.money;
            })
        },
        // 表单查询
        onSubmit() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        goIntegral() {
            this.$router.push({path: `/accountExUser/checkIntergral/${this.$route.params.id}`});
        }
    }
}
</script>
<style lang="scss" scoped >
.content {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor:#fff;
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .formBtn{
        width: 100%;
        height: 70px;
        border-top: 1px solid #dddddd;
        position: relative;
    }
    .table-title{
        position: relative;
        .title-tix{
            position: absolute;
            right: 0;
            bottom: 2px;
            color: #ccc;
            font-size: 12px;
        }
    }
    .btnPosition{
        position: absolute;
        right:0px; 
        top: 18px;
    }
    .btnPosition1{
        font-size:14px !important;
        color:#333;
        line-height:35px;
    }
    .btnPositionLeft{
        position: absolute;
        left:20px; 
        top: 18px;
    }
    .footer{
        text-align:center;
        margin-top:40px;
    }
    .footer .el-button{
        padding:10px 40px;
    }
}
</style>
